import React from "react";
import Header from "../components/Header";
import { Col, Row, Affix } from "antd";
import { CalendarOutlined } from "@ant-design/icons";
import axios from "axios";
import Login from "../components/Login";
import { marked } from "marked";
import hljs from "highlight.js";
import "highlight.js/styles/monokai-sublime.css";
import Tocify from "../components/tocify.tsx";

const Detail = (props) => {
  const renderer = new marked.Renderer();
  const tocify = new Tocify();
  renderer.heading = function (text, level, raw) {
    const anchor = tocify.add(text, level);
    return `<a id="${anchor}" href="#${anchor}" class="anchor-fix"><h${level}>${text}</h${level}></a>\n`;
  };
  marked.setOptions({
    renderer: renderer, // 这个是必须填写的，你可以通过自定义的Renderer渲染出自定义的格式
    gfm: true, //启动类似Github样式的Markdown,填写true或者false
    pedantic: false, //只解析符合Markdown定义的，不修正Markdown的错误。填写true或者false
    sanitize: false, //原始输出，忽略HTML标签，这个作为一个开发人员，一定要写flase
    tables: true, //支持Github形式的表格，必须打开gfm选项
    breaks: true, //支持Github换行符，必须打开gfm选项，填写true或者false
    smartLists: true, //优化列表输出，这个填写ture之后，你的样式会好看很多，所以建议设置成ture
    smartypants: false,
    highlight: function (code) {
      return hljs.highlightAuto(code).value;
    },
  });
  let html = marked(props.article_content);
  // console.log(html,'html');
  return (
    <>
      <Affix offsetTop={0}>
        <Header />
      </Affix>
      <Row className="comm-main" type="flex" justify="center">
        <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}>
          <div className="article-content">
            <div>
              <div className="detailed-title">{props.title}</div>

              <div className="list-icon center">
                <span>
                  <CalendarOutlined /> {props.add_time}
                </span>
              </div>

              <div
                className="detailed-content"
                dangerouslySetInnerHTML={{ __html: html }}
              ></div>
            </div>
          </div>
        </Col>
        <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
          <Affix offsetTop={44.8}>
            <Login />
            <div className="detailNav">
              <header>文章目录</header>
              {tocify && tocify.render()}
            </div>
          </Affix>
        </Col>
      </Row>
    </>
  );
};

Detail.getInitialProps = async (context) => {
  console.log(context.query.id);
  let id = context.query.id;
  const promise = new Promise((resolve) => {
    axios("http://127.0.0.1:7001/default/getArticleInfo/" + id).then((res) => {
      resolve(res.data.data[0]);
    });
  });

  return await promise;
};

export default Detail;
